<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white" class="swipe">
      <van-swipe-item>
        <img
          src="https://mall.s.maizuo.com/fc8145bbe762823b73e0039f64087e30.jpg?x-oss-process=image/resize,w_563"
          alt
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://mall.s.maizuo.com/47519bffd1d32d23c07e1fb3d0b3925a.jpg?x-oss-process=image/resize,w_563"
          alt
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://mall.s.maizuo.com/c55034edca81fb2f5cdd8d0c0de2a521.jpg?x-oss-process=image/resize,w_563"
          alt
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://mall.s.maizuo.com/edd0eab80b83ec37202a0c8dd7439cf9.jpg?x-oss-process=image/resize,w_563"
          alt
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品分类 -->
    <div class="goodsType">
      <ul>
        <router-link to="/type" tag="li">
         <img
            src="https://mall.s.maizuo.com/493ca1d9f1f1030a0fd9fe7a036eebfa.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>百果园公司</span>
        </router-link>
       
        <li>
          <img
            src="https://mall.s.maizuo.com/a14f2cbaaf1880b3edc549a1b82cf2e4.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>时令鲜果</span>
        </li>
        <li>
          <img
            src="https://mall.s.maizuo.com/3f164d8e9d6d13e4c1b37130be241418.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>地方农产</span>
        </li>
        <li>
          <img
            src="https://mall.s.maizuo.com/0578947deca37802fceda1437e42fc31.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>海鲜水产</span>
        </li>
        <li>
          <img
            src="https://mall.s.maizuo.com/389a7de57216bf1834663a582bc50d6d.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>五谷杂粮</span>
        </li>
        <li>
          <img
            src="https://mall.s.maizuo.com/81bafc53c6492a642da6c994fc4d4164.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>家禽蛋</span>
        </li>
        <li>
          <img
            src="https://mall.s.maizuo.com/ec66759c6d26ee805b421b1c51660291.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>牛羊肉</span>
        </li>
        <li>
          <img
            src="https://mall.s.maizuo.com/8c2a4760f0e015a6f8c2963801cc6c8e.jpg?x-oss-process=image/resize,w_68"
            alt
          />
          <span>农品茗茶</span>
        </li>
      </ul>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
        <ul>
            <li>
                <span>推荐</span>
            </li>
            <li>
                <span>销量</span>
               
                <div class="icon">
                <i class="iconfont icon-arrow-up2 up"></i>
                <i class="iconfont icon-down down"></i>
                </div>

            </li>
            <li>
                <span>价格</span>
               <div class="icon">
                <i class="iconfont icon-arrow-up2 up"></i>
                <i class="iconfont icon-down down"></i>
               
                </div>
            </li>
        </ul>
    </div>
    <!-- 内容部分 -->
     <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div v-for="item in list" :key="item" class="list">
        <div class="left-item">
            <router-link to="/index/detail" tag="div" class="img">
          <!-- <div class="img"> -->
            <span class="labels">
              <div style="background-color: rgb(229, 122, 123);">直降</div>
              <div style="background-color: rgb(120, 160, 209);">包邮</div>
            </span>
            <img
              src="https://mall.s.maizuo.com/0238d75b8a9e13c5a18df9781c296c83.png?x-oss-process=image/resize,w_158"
              alt
            />
          <!-- </div> -->
          </router-link>
          <div class="item-describe">
                <div class="masterName">
          【山西】农家苦荞米 2斤装
        </div>
                <div class="slaveName">传统古法种植 饱满香糯可口 自然晾晒无添加</div>
                  <div class="price"><span class="text1">￥</span><span class="text2">29.8</span></div>
          </div>
        

        </div>
        <div class="right-item">
          <div class="img">
             <span class="labels">
              <div style="background-color: rgb(229, 122, 123);">直降</div>
              <div style="background-color: rgb(120, 160, 209);">包邮</div>
            </span>
            <img
              src="https://mall.s.maizuo.com/0238d75b8a9e13c5a18df9781c296c83.png?x-oss-process=image/resize,w_158"
              alt
            />
          </div>
           <div class="item-describe">
                <div class="masterName">【山西】甜脆柿子 12个装（果径70mm+/枚）</div>
                <div class="slaveName">传统古法种植 饱满香糯可口 自然晾晒无添加</div>
               <div class="price"><span class="text1">￥</span><span class="text2">29.8</span></div>
          </div>
        </div>
      </div>
    </van-list>
    <Footer></Footer>
   
  </div>
</template>

<script>
import Footer from '@/components/Footer'
export default {
      data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },

  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  },
  components:{
    Footer
  }

};
</script>
<style lang="less" scoped>
//轮播图
.swipe {
  height: 210px;
  width: 100%;
  img{
    width: 100%;
  }
}
// 商品种类
.goodsType {
  background: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-bottom: 18px;
    li {
        color: #a6a9ac;
      margin-top: 15px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
      span {
        margin-top: 5px;
        font-size: 13px;
        color: #2e2f30;
      }
      flex: 25%;
    }
  }
}
// 导航栏
.nav{
    margin-top: 10px;
    ul{
        height: 44px;
        background: #fff;
        display: flex;
        justify-content: space-around;
        li{
           color: #a6a9ac;
            height: 100%;
            display: flex;
            align-items: center;
        }
        span{
          color: #797d82;
            font-size: 14px;
            line-height: 35px;
             margin-right: 10px;
        }
        .icon{       
          position: relative;
          top: -13px;
          left: -7px;
        }
        .iconfont {
          position: absolute;
         text-align: center;       
          font-size: 16px;
        
        }.up{
          top: 2px;
          margin-bottom: 5px;
        }.down{
          top:10px;
        }
    }
}
//内容部分
.van-list{
    margin-top: 1px;
     padding: 15px;
    background: #fff;
    // box-sizing: border-box;

.list {
     padding-bottom: 20px;
    background: #fff;
     
  display: flex;
  justify-content: space-around;
    .img{
      position: relative;
        background: #f4f4f4;
        
    }
    .labels{
      position: absolute;
      display: flex;
      bottom: 10px;
      left: 5px;
      left: 0px;
      bottom: 4px;
      div{

        margin-right: 5px;
        height: 14px;
        font-size: 12px;
        width: 32px;
        text-align: center;
        color: #fff;
      }
      
    }
    .item-describe{
      margin-top: 8px;
      div{
        line-height: 18px;
            overflow: hidden;
        text-overflow: ellipsis;
         white-space: nowrap; 
      }
      .masterName{
            font-size: 14px;
      }
           .slaveName {
    font-size: 12px;
    margin-bottom: 2px;
    color: #797d82;
}
    }
  .left-item {
    width: 45%;
    margin-right: 15px;
    flex: 1;
  }
  .right-item {
     width: 45%;
    flex: 1;
  }
  p {
    
    width: 150px;
    height: 20px;    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .price{
    .text1{
      font-size: 10px;
    }.text2{
      font-size: 15px;
    }
    color:#c03131;
  }
}}

</style>
